<!doctype html>
<html lang="{{currentLanguage}}">
<head>
<meta charset="utf-8" />
<title>Docs TOC</title>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
</head>

<body class="dev-toc p-3 m-3">
<main class="width-full">

<h3>Versions</h3>
<ul class="versions-list" style="list-style-type:none;">
{% for version in allVersions %}
<li style="margin: 3px 0 0 0;"><a href="../{{ version[0] }}/index.html">{{ version[1].versionTitle }}</a>
{% endfor %}
</ul>

{% assign docsRoot = "https://docs.github.com" %}

{% if allVersions[currentVersion] %}
<h2 class="mt-3 mb-3"><abbr>TOC</abbr> for {{ allVersions[currentVersion].versionTitle }}</h2>

<button class="btn mb-3 js-expand" type="button">Expand All</button>
<div/>

{% assign maxTocDepth = 5 %}

{% for productPage in currentEnglishTree.childPages %}
  {% assign productId = productPage.page.relativePath | replace: "/index.md", "" %}
  {% if defaultOpenSections contains productId %}
    <details open class="mb-1"><summary>{{productPage.renderedFullTitle}}</summary>
  {% else %}
    <details class="mb-1"><summary>{{productPage.renderedFullTitle}}</summary>
  {% endif %}

  <ul class="products-list">
    <li title="{{productPage.renderedFullTitle}}" style="margin: 3px 0 0 30px;">
      <a title="{{ productPage.page.documentType }}" href="{{ docsRoot }}{{productPage.href}}">{{ productPage.renderedFullTitle }}</a>

      {% comment %} Unified nested rendering with depth control {% endcomment %}
      {% if productPage.childPages and productPage.childPages.size > 0 %}
        <ul>
          {% for l1 in productPage.childPages %}
            <li style="margin: 3px 0 0 30px;">
              <a title="{{ l1.page.documentType }}" href="{{ docsRoot }}{{ l1.href }}">{{ l1.renderedFullTitle }}</a>
              {% if l1.childPages and l1.childPages.size > 0 and maxTocDepth >= 2 %}
                <ul>
                  {% for l2 in l1.childPages %}
                    <li style="margin: 3px 0 0 30px;">
                      <a title="{{ l2.page.documentType }}" href="{{ docsRoot }}{{ l2.href }}">{{ l2.renderedFullTitle }}</a>
                      {% if l2.childPages and l2.childPages.size > 0 and maxTocDepth >= 3 %}
                        <ul>
                          {% for l3 in l2.childPages %}
                            <li style="margin: 3px 0 0 30px;">
                              <a title="{{ l3.page.documentType }}" href="{{ docsRoot }}{{ l3.href }}">{{ l3.renderedFullTitle }}</a>
                              {% if l3.childPages and l3.childPages.size > 0 and maxTocDepth >= 4 %}
                                <ul>
                                  {% for l4 in l3.childPages %}
                                    <li style="margin: 3px 0 0 30px;">
                                      <a title="{{ l4.page.documentType }}" href="{{ docsRoot }}{{ l4.href }}">{{ l4.renderedFullTitle }}</a>
                                      {% if l4.childPages and l4.childPages.size > 0 and maxTocDepth >= 5 %}
                                        <ul>
                                          {% for l5 in l4.childPages %}
                                            <li style="margin: 3px 0 0 30px;">
                                              <a title="{{ l5.page.documentType }}" href="{{ docsRoot }}{{ l5.href }}">{{ l5.renderedFullTitle }}</a>
                                            </li>
                                          {% endfor %}
                                        </ul>
                                      {% endif %}
                                    </li>
                                  {% endfor %}
                                </ul>
                              {% endif %}
                            </li>
                          {% endfor %}
                        </ul>
                      {% endif %}
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  </ul>
  </details>
{% endfor %}
{% endif %}

<script>
const expandBtn = document.querySelector('.js-expand');
expandBtn?.addEventListener('click', function() {
  const details = document.querySelectorAll('details');
  const shouldExpand = expandBtn.textContent.trim() === 'Expand All';
  details.forEach(detail => {
    detail.open = shouldExpand;
  });
  expandBtn.textContent = shouldExpand ? 'Collapse All' : 'Expand All';
});
</script>
</main>
</body>
</html>
